<template>
  <div class="contract-detail-wrap flex">
    <el-form style="flex: 1" label-position="left" label-width="100px" disabled>
      <section>
        <h1 class="section-title">合同信息</h1>
        <div class="info-item border-top flex">
          <el-form-item label="合同编号" style="width: 50%">
            <span>{{ info.ContractCode }}</span>
          </el-form-item>
          <el-form-item label="合同归属" style="width: 50%">
            <span>{{ info.ProductId === 1 ? 'FICC' : '权益' }}</span>
          </el-form-item>
        </div>
        <div class="info-item border-top">
          <el-form-item label="合同类型">
            <el-radio-group v-model="info.ContractType">
              <el-radio label="新签合同">新签合同</el-radio>
              <el-radio label="续约合同">续约合同</el-radio>
              <el-radio label="补充协议">补充协议</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="info-item border-top flex">
          <el-form-item label="合同期限" style="width: 50%">
            <el-date-picker
              v-model="info.timeRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <span style="line-height: 40px">{{ formatTimeRange(info.timeRange) }}</span>
        </div>
        <div class="info-item border-top flex">
          <el-form-item label="合同金额" style="width: 50%">
            <el-input :model-value="info.OriginalPrice" style="width: 250px"></el-input>
          </el-form-item>
          <span style="line-height: 40px">{{ formatPrice(info.OriginalPrice) }}</span>
        </div>
        <div class="info-item border-top flex">
          <el-form-item label="优惠后金额" style="width: 50%">
            <el-input :model-value="info.Price" style="width: 250px"></el-input>
          </el-form-item>
          <span style="line-height: 40px">{{ formatPrice(info.Price) }}</span>
        </div>
        <div class="info-item border-top">
          <el-form-item label="付款方式">
            <el-input :model-value="info.PayRemark" type="textarea"></el-input>
          </el-form-item>
        </div>
      </section>
      <section>
        <h1 class="section-title">客户信息</h1>
        <div class="info-item border-top flex">
          <el-form-item label="甲方名称" style="width: 50%">
            <el-input :model-value="info.CompanyName" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="社会信用码" style="width: 50%">
            <el-input :model-value="info.CreditCode" style="width: 250px"></el-input>
          </el-form-item>
        </div>
        <div class="info-item border-top flex">
          <el-form-item label="公司地址" style="width: 50%">
            <el-input :model-value="info.Province + info.City" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" style="width: 50%">
            <el-input :model-value="info.Address" style="width: 250px"></el-input>
          </el-form-item>
        </div>
        <div class="info-item border-top flex">
          <el-form-item label="传真" style="width: 50%">
            <el-input :model-value="info.Fax" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="电话" style="width: 50%">
            <el-input :model-value="info.Phone" style="width: 250px"></el-input>
          </el-form-item>
        </div>
        <div class="info-item border-top flex">
          <el-form-item label="邮编" style="width: 50%">
            <el-input :model-value="info.Postcode" style="width: 250px"></el-input>
          </el-form-item>
        </div>
      </section>
      <section>
        <h1 class="section-title">服务内容</h1>
        <ServiceTable :ProductId="info.ProductId" :service="info.Service" :isDetail="true"></ServiceTable>
        <p style="margin-top: 30px; margin-bottom: 20px">补充内容（eg额外赠送、路演次数规定）</p>
        <el-radio-group v-model="info.hasRemark">
          <el-radio label="2">无</el-radio>
          <el-radio label="1">有</el-radio>
        </el-radio-group>
        <el-input type="textarea" :model-value="info.Remark" v-if="info.Remark" style="margin-top:20px"></el-input>
      </section>
    </el-form>
    <div style="margin-left: 20px">
      <div style="margin-bottom:20px;display: flex; justify-content: space-between">
        <el-button type="primary" v-if="info.canEdit" style="width:45%">编辑</el-button>
        <el-button type="primary" plain :style="{width:info.canEdit?'45%':'100%'}">预览</el-button>
      </div>
      <time-line></time-line>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'

import TimeLine from './components/TimeLine.vue'
import ServiceTable from './components/ServiceTable.vue'
import { apiContractDetail } from '@/api/contract'
import { timeToYear, priceToChinese } from './util'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'ContractDetail',
  components: {
    TimeLine,
    ServiceTable
  },
  setup() {
    const route = useRoute()
    const store = useStore()
    // 获取详情
    let info = ref({})
    const getDetail = async () => {
      let res = await apiContractDetail({ ContractId: Number(route.params.id) })
      if (res.Ret === 200) {
        // 本人的合同并且合同状态不为 已审批、待审批、已作废 则显示编辑
        let userid = store.state.user.data.AdminId
        info.value = {
          ...res.Data,
          timeRange: [res.Data.StartDate, res.Data.EndDate],
          hasRemark: res.Data.Remark ? '1' : '2',
          canEdit:
            userid === res.Data.SellerId &&
            res.Data.Status !== '待审批' &&
            res.Data.Status !== '已审批' &&
            res.Data.Status !== '已作废'
        }
      }
    }

    // 格式化合同时间期限
    const formatTimeRange = (timeRange: Array<string>): string => {
      return `有效期为 ${timeToYear(timeRange)} 年`
    }

    //格式化金额为大写
    const formatPrice = (price: number): string => {
      return `大写：${priceToChinese(price)}`
    }

    getDetail()
    return {
      info,
      formatTimeRange,
      formatPrice
    }
  }
})
</script>

<style lang="scss" scoped>
section {
  background-color: #fff;
  border: 1px solid #aab4cc;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  .border-top {
    border-top: 1px solid#dcdfe6;
  }
  .section-title {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 20px;
  }
}
.contract-detail-wrap {
  justify-content: space-between;
  .info-item {
    padding-top: 20px;
  }
}
</style>
